<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="../css/index.css">
        <title>Syba - Administration</title>
        <script type="text/javascript" src="../scripts_js/XMLHttpRequest.js"></script>
        <script type="text/javascript" src="../scripts_js/fonctions.js"></script>
    </head>
    <body onload="verification_session();recupererListeEleves();
            addId();
            cacher();">
        <header>
            <a href="../generateur.html">
                <img id="home_direction" src="../images/home.png" />
            </a>
            <h1 id="title"> Gestion des Elèves </h1>
            <div id="connecté">
                Bienvenue   <b id="aff_pseudo2"></b> <input type="button" id="b_deconnexion" value="deconnexion " onclick="deconnexion();"/>
            </div>
        </header>

        <nav>
            <div id="menu">
                <input type="hidden" id="id_adulte" name="id_adulte" />
                <ul>
                    <li style="width: 20%; height: 20%;">
                        <div>
                            <p>
                                <a href="../partie_generateur/ens_gestion_eleves_ajout.html">
                                    <img src="../images/add.png" alt="Eleves" style="width: 20%; height: 20%;" />
                                </a>
                            </p>
                            <p>Ajouter un élève</p>
                        </div>
                    </li>
                    
                    <li style="width: 20%; height: 20%;">
                        <div>
                            <p>
                                <a href="../partie_generateur/ens_gestion_eleves_aff_tous.html">
                                    <img src="../images/list.png" alt="Eleves" style="width: 20%; height: 20%;" />
                                </a>
                            </p>
                            <p>Afficher tous les élèves</p>
                        </div>
                    </li>




                </ul>
                <table align ="center">
                    <tr>
                        <th>
                            <input id ="search" type="search" placeholder="Entrez un nom" name ="Rechercher"  > </th> <th><button type="submit" onclick="recupererListeEleves();" >Rechercher </button> </th>
                    </tr>
                </table>

            </div>

            <div style="clear:both;"></div>
        </nav>
        <article>
           

        </article>
        <footer>
            <script type="text/javascript">
            afficherfooter();
            </script>
        </footer>
        <script type="text/javascript">

        function cacher() {
            if (readCookie("Syba_connexion") !== null) {

                document.getElementById('aff_pseudo2').innerHTML = readCookie("Syba_connexion");

            }
            else {
                document.getElementById('connecté').setAttribute('style', 'display:none;');
            }
        }
        
        //Deconnexion de l'utilisateur
        function deconnexion() {
            eraseCookie("Syba_connexion");
            eraseCookie("Syba_id_personne");
            window.location = "../index.html";

        }
        
        //Ajoute l'id dans le input hidden
        function addId() {
            document.getElementById("id_adulte").value = readCookie("Syba_id_personne");
        }

        //Récupère un fichier xml contenant la liste des élèves
        function recupererListeEleves() {
            var listeDesEleves; 

            var xhr = getXMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                    //alert("[" + xhr.responseText + "]");
                    //callback(xhr.responseText);
                    var docXML = xhr.responseText;
                    listeDesEleves = stringToXML(docXML);
                    construireTableauEleves(listeDesEleves);
                }
            };

            var fd = new FormData();
            fd.append("id", readCookie("Syba_id_personne"));
            fd.append("nom", document.getElementById("search").value);

            xhr.open("POST", "../scripts_php/eleve_rechercher_tous_mes_mysql.php", false);
            xhr.send(fd);
        }


        //Affichage des élèves
        function construireTableauEleves(xml) {

            var listeDEleves = xml.getElementsByTagName("eleve");
             var body = document.getElementsByTagName('article')[0];

            while (body.firstChild) {
                body.removeChild(body.firstChild);
              }

            for (var i = 0; i < listeDEleves.length; i++) {
        
                var idGet = listeDEleves[i].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue;
            
                
                var div = document.createElement("div");
                div.setAttribute('style', 'width:20%; height:' + window.innerHeight / 3.5 + '; margin-left: 4%; margin-bottom: 2%;display: inline-block;');
                var div1 = div.appendChild(document.createElement("div"));
                div1.setAttribute('id', 'mosaic');
                div1.setAttribute('style', 'float: left;border: 5px black solid;  background-image:url(../imagesProfils/'+addslashes(listeDEleves[i].getElementsByTagName("image")[0].childNodes[0].nodeValue)+') ; background-position:center; background-repeat:no-repeat; background-size: 100% 100%; -webkit-background-size: 100% 100%; -o-background-size: 100% 100%; -moz-background-size: 100% 100%;width:70%; height:' + window.innerHeight / 4 + 'px; display: inline-block;');
               
                 
                var div2 = div1.appendChild(document.createElement("div"));
                div2.setAttribute('style', 'width: 100%; height: 15%;  background-color: black; opacity:0.5; color:white; text-align:center; font-size: ' + window.innerHeight / 32 + 'px;font-weight:bold;');
                div2.appendChild(document.createTextNode(listeDEleves[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue));
                
                var div3 = div1.appendChild(document.createElement("div"));
                div3.setAttribute('style', 'width: 70%; height: 60%;position:static; display: inline-block;');
                
                var div4 = div1.appendChild(document.createElement("div"));
                div4.setAttribute('style', 'width: 30%; height: 60%;position:static; display: inline-block;');
                               
                var div5 = div1.appendChild(document.createElement("div"));
                div5.setAttribute('style', 'width: 100%; height: 25%;background-color: white; opacity:0.7; color: black; text-align: center; font-size: ' + window.innerHeight / 39 + 'px; font-weight:bold; word-wrap: break-word;');
                div5.appendChild(document.createTextNode(listeDEleves[i].getElementsByTagName("prenom")[0].childNodes[0].nodeValue));
                body.appendChild(div);
                
                var div6 = div.appendChild(document.createElement("div"));
                div6.setAttribute('style', ' black;width:20%; height:32%; display: inline-block;');
                var ancreImgModifier = div6.appendChild(document.createElement("a"));
                ancreImgModifier.setAttribute('href', '../partie_generateur/ens_gestion_eleves_edition.html?id=' + idGet);
                ancreImgModifier.setAttribute('onclick', 'submit()');
                var img = ancreImgModifier.appendChild(document.createElement("img"));
                img.setAttribute('src', '../images/edit.png');
                img.setAttribute('style', 'width: 100%; height: ' + window.innerHeight / 9 + 'px;');
                
                var div7 = div.appendChild(document.createElement("div"));
                div7.setAttribute('style', ' width:20%; height:32%; display: inline-block;');
                var ancreImgSupprimer = div7.appendChild(document.createElement("a"));
                ancreImgSupprimer.setAttribute('href', '../partie_generateur/ens_gestion_eleves.html');
                ancreImgSupprimer.setAttribute('onclick', 'supprimerEleve(' + listeDEleves[i].getElementsByTagName("identifiant")[0].childNodes[0].nodeValue + ')');
                var img2 = ancreImgSupprimer.appendChild(document.createElement("img"));
                img2.setAttribute('src', '../images/delete.png');
                img2.setAttribute('style', 'width: 100%; height: ' + window.innerHeight / 9 + 'px;');
            }
               
        }


        //Suppression d'un élève
        function supprimerEleve(id) {
            var r = confirm("Voulez vous supprimer cet utilisateur ? ");
            if (r === true)
            {
                //var currentLocation =  document.location.href;
                var xhr = getXMLHttpRequest();

                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 0)) {
                        //alert("[" + xhr.responseText + "]");
                        //callback(xhr.responseText);
                    }
                };

                var fd = new FormData();
                fd.append("identifiant", id);
                xhr.open('POST', "../scripts_php/eleve_supprimer_mysql.php", false);
                xhr.send(fd);
            }

        }
        
        
        </script>

    </body>
</html>